<template>
	<view class="uswitch_p" @click="switch_click()">
		<view class="uswitch" :class="{ 'on': switchon == 1 }" :style="[mystyle]">
			<view class="slide_view" :style="[slidestyle, { right: switchon == 1 ? `${width - height}rpx` : '0rpx' }]">
			</view>
		</view>
	</view>
</template>

<script>

export default {

	name: 'myswitch',
	props: {
		switchon: {
			type: [Number, String],
			default: 0
		},
		item: {
			type: [Object],
			default: {}
		},
		index: {
			type: [Number, String],
			default: 0
		},
		width: {
			type: [Number, String],
			default: '82'
		},
		height: {
			type: [Number, String],
			default: '42'
		},
		padding: {
			type: [Number, String],
			default: '4'
		},
		// bg: {
		// 	type: [String],
		// 	default: '#EBEDF3'
		// },
		// bg_on: {
		// 	type: [String],
		// 	default: '#1FD1C2'
		// }
	},
	data() {
		return {

		};
	},
	beforeCreate() {

	},
	created() {

	},
	mounted() {
		// const query = uni.createSelectorQuery().in(this);
		// query.select('.uswitch_p').fields({ size: true, rect: true }, (result) => {
		// 	console.log('DOM Element:', result);
		// }).exec();
	},
	computed: {
		mystyle() {
			return {
				width: `${this.width}rpx`,
				height: `${this.height}rpx`,
				// padding: `${this.padding}rpx`,
				borderRadius: `${this.height / 2}rpx`,
			}
		},
		slidestyle() {
			return {
				width: `${this.height}rpx`,
				height: `${this.height}rpx`,
				// padding: `${this.padding}rpx`,
				borderWidth: `${this.padding}rpx`,
				borderStyle: `solid`,
			}
		},

	},
	methods: {
		switch_click() {
			let _this = this;
			this.$emit('switch_click', { item: _this.item, value: _this.switchon, index: _this.index });
		}
	},
	watch: {

	}
};
</script>

<style lang="scss">
// 页面样式
.uswitch_p {}

.uswitch {
	width: var(--width);
	height: var(--height);
	border-radius: calc(var(--height) / 2);
	background: #EBEDF3;
	position: relative;
	transition: background 0.4s ease;

	.slide_view {
		position: absolute;
		top: 0;

		display: block;
		background: #fff;
		border-radius: 50%;
		border-color: #EBEDF3;
		transition: border-color 0.4s ease, right 0.4s ease;
		box-sizing: border-box;
	}

	&.on {
		background: #1FD1C2;

		.slide_view {
			right: 0;
			border-color: #1FD1C2;
		}
	}
}
</style>
